<template>
  <div class="content">
    <div class="searchBar">
      <van-sticky>
        <van-search
            id="search"
            v-model="search_value"
            show-action
            background="#f2f3f5"
            left-icon="search"
            @search="onSearch"
        >
          <template #action>
            <div>
              <van-button
                  hairline
                  round
                  size="small"
                  color="blue"
                  plain
                  type="default"
                  @click="onSearch"
              >搜索
              </van-button>
              <van-button
                  hairline
                  round
                  size="small"
                  color="blue"
                  plain
                  type="default"
                  @click="onSearchSource"
              >酷狗搜索
              </van-button>
            </div>

          </template>
        </van-search>
      </van-sticky>
    </div>
    <div class="searchContent">
      <span>搜索结果</span>
      <div class="wrapper" v-if="!is_kugou_search">
        <div v-if="song_list.length>0">
          <div v-for="(item,index) in song_list" :key="index">
            <div class="list-item emphasize-dark" @click="toSongInfo(item)">
              <div class="list-header">
                <div class="song-info">
                  <van-image width="3rem" height="3rem" :src="item.music_img"></van-image>
                  <h3 class="list-title">{{ item.music_name }}</h3>
                </div>
                <div class="icon_group">
                  <van-icon :name="is_play==item.music_id?'pause-circle':'play-circle'" size="30px" color="white"
                            @click.stop="playMusic(is_play==item.music_id,item.music_id,item.music_name)"/>
                  <van-icon :name="item.is_like?'like':'like-o'" color="red"
                            @click.stop="like(item)" size="30px"/>
                </div>
              </div>
              <div class="img-box">
            <span class="list-img" v-for="(user,index_1) in item.user_list.slice(0,3)" :key="index_1">
              <van-image round width="3rem" height="3rem" :src="user.avatar"/>
            </span>
                <span class="list-img" v-if="item.user_list.length>3">
              <div class="list-end">+{{ item.user_list.length - 3 }}</div>
            </span>
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: center;" v-else>
          <span>没有在线听歌的搜索结果！</span>
        </div>
      </div>
      <div class="wrapper" v-if="is_kugou_search">
        <div>
          <div v-for="(item) in source" :key="item.music_id">
            <van-cell>
              <template #icon>
                <van-image :src="item.music_img" width="3rem" height="3rem" round/>
              </template>
              <template #title>
                <span>{{ item.music_name }}</span>
              </template>
              <template #label>
                <span>{{ item.music_author }}</span>
              </template>
              <template #right-icon>
                <div class="icon_group">
                  <van-icon :name="is_play==item.music_id?'pause-circle':'play-circle'" size="30px" color="green"
                            @click.stop="playMusic(is_play==item.music_id,item.music_id,item.music_name)"/>
                  <van-icon @click.stop="like(item)" size="30px"/>
                  <van-icon :name="item.is_like?'like':'like-o'" color="red"
                            @click.stop="like(item)" size="30px"/>
                </div>
              </template>
            </van-cell>
          </div>
          <van-pagination v-model="cur_page" :total-items="total" :items-per-page="cur_num" @change="onChange"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getQueryVariable,convertImgUrl} from "@/utils/const";
import api from "@/api/api";
import music from "@/api/music";
import Vue from 'vue'
import {Toast} from 'vant'

Vue.use(Toast)
export default {
  name: "Search",
  data() {
    return {
      search_value: '',
      song_list: [],
      raw_list: [],
      source: [],
      is_play: "",
      cur_page: 1,
      cur_num: 5,
      total: 0,
      is_kugou_search: false,
      like_list: []
    }
  },
  methods: {
    onChange() {
      let that = this
      MiniApp.searchSource({
        type: 1,
        keyword: that.search_value,
        page: that.cur_page,
        pageSize: that.cur_num,
        success(res) {
          that.cur_page = res.cur_page
          that.cur_num = res.cur_num
          that.total = res.total
          that.source = res.song_data_list.map(item => {
            return {
              music_name: item.audio_name,
              music_id: item.album_audio_id,
              music_img: convertImgUrl(item.album_sizable_cover||item.authors[0].sizable_avatar),
              music_author: item.author_name,
              is_like: !that.like_list.indexOf(item.album_audio_id) === -1
            }
          })
        }
      })
    },
    playMusic(isPlay, music_id, music_name) {
      let that = this
      if (!isPlay) {
        music.playMusic(music_id, music_name).then(() => {
          that.is_play = music_id
        })
      } else {
        music.stopMusic()
        that.is_play = ""
      }
    },
    toSongInfo(item) {
      MiniApp && MiniApp.setStorage({
        key: "songInfo",
        data: item,
        success: () => {
          MiniApp.navigateTo({
            url: "/songpage.html"
          })
        }
      })
    },
    onSearchSource() {
      this.is_kugou_search = true
      this.cur_page = 1
      this.cur_num = 5
      let that = this
      MiniApp.searchSource({
        type: 1,
        keyword: that.search_value,
        page: that.cur_page,
        pageSize: that.cur_num,
        success(res) {
          that.cur_page = res.cur_page
          that.cur_num = res.cur_num
          that.total = res.total
          that.source = res.song_data_list.map(item => {
            return {
              music_name: item.audio_name,
              music_id: item.album_audio_id,
              music_img: convertImgUrl(item.album_sizable_cover||item.authors[0].sizable_avatar),
              music_author: item.author_name,
              is_like: !that.like_list.indexOf(item.album_audio_id) === -1
            }
          })

        }
      })
    },
    onSearch() {
      this.is_kugou_search = false
      MiniApp.showLoading({
        title: "正在搜索..."
      })
      let search = this.search.bind(this)
      this.song_list = search(this.search_value)
      MiniApp.hideLoading()
    },
    like(song) {
      if (song.is_like) {
        song.is_like = false
        MiniApp.showToast({
          title: "取消收藏"
        })
        //TODO
      } else {
        song.is_like = true
        MiniApp.showToast({
          title: "收藏成功"
        })
        api.addToLike(song.music_id, song.music_name)
      }
    },
    search(searchValue) {
      if (searchValue === '') return [];
      let searchList = []
      let reg = new RegExp(searchValue, "i")
      this.raw_list.forEach((item) => {
        if (reg.test(item.music_name)) {
          searchList.push(item)
        }
      })
      return searchList;
    }
  },
  mounted() {
    let that = this
    this.search_value = getQueryVariable("search")
    api.getLikeList().then(res => {
      that.like_list = res
    })
    this.raw_list = JSON.parse(MiniApp.getStorageSync({key: 'rawList'}))
    let info=music.getMusicPlayer().info
    if (info.playStatus==="play"){
      this.is_play = music.getMusicPlayer().info.currentMixId
    }else {
      this.is_play = ""
    }
    this.onSearch()
  }
}
</script>

<style scoped>
.searchContent {
  margin-top: 20px;
}

.list-title {
  font-size: 36px;
}

.list-end {
  height: 3rem;
  width: 3rem;
  display: table-cell;
  background-color: pink;
  border-radius: 1.5rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1.5rem;
}


.img-box {
  display: flex;
  margin-top: 1rem;
}

.list-item {
  background-color: #0190FD;
  border-radius: 0.5rem;
  padding: 0.5rem 0.8rem;
  margin-bottom: 30px;
}

.list-item:active {
  transform: translate(3px, 3px);
}

.list-item > .img-box > .list-img {
  margin-right: 0.4rem;
}

.extern {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

.no-search {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.icon_group {
  display: flex;
}

.list-header {
  display: flex;
  justify-content: space-between;
}

.wrapper {
  padding: 8px;
  margin-bottom: 20px;
}

.song-info{
  display: flex;
  align-items: center;
}
</style>